<template>
  <div>

    <div class="each-main-info">
      <div class="name"><span class="red">*</span>识别类型：</div>
      <div class="value">
        <el-radio-group v-model="distinguishType" size="small">
          <el-radio-button label="mult">{{ modelType == "img_classify" ? '多图片' : modelType == "img_detection" ? "多图片" : "文件" }}</el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <div class="each-main-info">
       <div class="name"><span class="red">*</span>上传数据：</div>
       <div class="value">
         <mine-upload ref="upload" :fileType="fileType"></mine-upload>
          <mine-button secondary class="margin--top--ten" @click="downloadSample">下载代码规范文档<i class="el-icon-download el-icon--right"></i></mine-button>
       </div>
    </div>

    <div class="each-main-info">
      <div class="name"></div>
      <el-button v-if="analysisStatus == 0" :type="analysisStatus == 0 ? 'primary' : 'success'" size="small" @click="submitMult">{{ analysisStatus == 0 ? "开始分析" : "下载结果" }}</el-button>
      <el-button v-if="analysisStatus == 2" size="small" @click="goBack">返回详情页面</el-button>
    </div>
  </div>
</template>

<script>
export default {

  props: ["id", "modelType"],

  data: function () {
    return {
      distinguishType: "mult", // 上传图片类型
      fileType: ".zip", // 文件类型
      analysisStatus: 0, // 分析状态
      taskId: "", // 任务id
    }
  },

  computed: {
    type () {
      return this.$route.query.type || '';
    },
    modelFileType () {
      return this.$route.query.modelFileType || '';
    }
  },

  mounted: function () {
    if (this.type === 'other') {
      this.fileType = '.txt,.csv,.xls,.xlsx';
    }
    this.loadTaskId();
  },

  methods: {
    async downloadSample () {
      const params = {
        projectType: this.type === 'other' ? this.modelFileType : this.type, // type: other类型 取 modelFileType
      };
      try {
        await this.$store.dispatch('modelManageMaterialInfoDownloadPredictTemplate', params);
      } catch (e) {
        console.error(e);
      }
    },
    // 返回列表
    goBack: function () {
      history.go(-1);
    },

    // 加载任务id
    loadTaskId: async function () {
      try {
        const res = await this.$store.dispatch('modelManagePublishTaskDataSearch', { projectId: this.id });
        const result = res.data || {};
        if (result.success) {
          this.taskId = result.data.list[0].id;
        }
      } catch (error) {
        console.log(error)
      }
    },

    // 提交上传
    submitMult: function ()  {
      if (this.analysisStatus == 0) {
        if (this.checkUpload()) {
          this.analysisStatus = 1;
          this.uploadFile();
        }
      }
    },

    // 上传文件
    uploadFile: async function () {
      var formData = new FormData();
      formData.append("File", this.$refs.upload.fileList[0].raw);
      formData.append("projectId", this.id);
      try {
        this.$refs.upload.uploadStatus = "uploading";
        const res = await this.$store.dispatch('modelManageMaterialInfoUpload', formData);
        const result = res.data || {};
        if (result.success) {
          var data = result.data || {};
          this.createTask(data);
        } else {
          this.$message.error(result.msg || '上传文件失败');
        }
      } catch (e) {
        console.error(e);
      }
    },

    // 创建分析任务
    createTask: async function (data) {
      data["taskId"] = this.taskId;
      try {
        const res = await this.$store.dispatch('modelManagePredictDataMultiCreate', data);
        const result = res.data || {};
        if (result.success) {
          var resultData = result.data || {};
          data["id"] = resultData.id;
          this.startTask(data);
          // 跳到详情页面
          window.history.go(-1);
        } else {
          this.$message.error(result.msg || '创建分析任务失败');
        }
      } catch (e) {
        console.error(e);
      }
    },

    // 开始分析任务
    startTask: async function (data) {
      try {
        const res = await this.$store.dispatch('modelManagePredictDataMultiRun', data);
        const result = res.data || {};
        if (result.success) {
          this.$refs.upload && (this.$refs.upload.uploadStatus = "success");
          this.$message({ type: "success", message: "上传成功" });
          this.analysisStatus = 2;
        } else {
          this.$message.error(result.msg || '上传失败');
        }
      } catch (e) {
        console.error(e);
      }
    },

    // 检查上传的数据
    checkUpload: function () {
      if (this.$refs.upload.fileList.length == 0) {
        this.$message({ type: "error", message: "请选择上传文件" });
        return false;
      }
      return true;
    }
  }
}
</script>

<style lang="less" scoped>
  .margin--top--ten {
    margin-top: 10px;
  }
  .main {
    width: 100%;
    height: 100%;
  }

  .main-body {
    height: calc(~"100% - 48px");
    overflow: auto;
    padding: 20px;
    background: #FFFFFF;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    font-family: PingFangSC-Regular;
  }

  .each-main-info {
    width: 100%;
    margin-bottom: 30px;
  }

  .each-main-info .name {
    width: 100px;
    display: inline-block;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(0,0,0,0.75);
    text-align: right;
    line-height: 22px;
    font-weight: 400;
    vertical-align: top;
  }

  .each-main-info .value {
    width: calc(~"100% - 200px");
    display: inline-block;
  }

  .vertical-top {
    vertical-align: top;
  }

  .red {
    color: #F73D47;
    font-size: 18px;
    margin-right: 5px;
  }

  .short {
    width: 512px !important;
  }

  .single-show-area {
    width: calc(~"100% - 2px");
    height: 470px;
    border: solid 1px #e6e6e6;
    border-top: none;
  }

  /deep/ .el-tabs__header {
    margin: 0;
  }

  .result-area {
    border-radius: 5px;
    margin-left: 10px;
    width: 75%;
    height: 400px;
    background: white;
    border: 1px solid #f0f0f0;
    box-shadow: 0 0 1px #f0f0f0;
  }

  .result-area .result-area-head {
    border-radius: 5px;
    width: 100%;
    height: 40px;
    padding-left: 10px;
    line-height: 40px;
    background: rgb(248, 248, 248);
    box-sizing: border-box;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.75);
    font-weight: 500;
  }

  .result-area-body {
    width: 100%;
    height: calc(100% - 40px);
    overflow: auto;
  }

  .single-resultImg {
    width: 100%;
  }

  .each-result {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: solid 1px #f5f5f5;
    box-sizing: border-box;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: rgba(0,0,0,0.75);
    font-weight: 400;
    padding-left: 30px;
  }
</style>
